AS components have been available since since version 3.2 of Content Studio. They are still fully supported in Content Studio but are surpassed by the user controls in ASP.NET 2.0.
We strongly recommend that you create all your new components as user controls , as they are:

  • Easier to create in Content Studio
  • Provide more functionality
  • Give a better performance
  • The standard ASP.NET way of doing the same thing
  • Easily shared between ASP.NET web sites

Att skapa en AS-komponent i Content Studio består av två delar; dels att skapa själva programkoden, dels att skapa de parametrar som kan användas för att konfigurera komponenten.

AS-komponenter måste skapas i en kategori av typen "Active Scripting". Dokument som skapas/redigeras i dessa kategorier hanteras av ett gränssnitt med något annorlunda utseende än den vanliga webbitorn.

Programkoden i en AS-komponent kan vara skriven i C# eller i VB.NET - eller både och. Komponenter som skrivs i C# endast, kan endast infogas i sidor med C# som förvalt programspråk. Detsamma gäller VB.NET. Det är alltså möjligt att kombinera ihop de två språken och därmed använda komponenterna på både C# och VB.NET baserade sidor. 

Content Studio använder AS-komponenter för att "generera" programkod - den programkod som ligger i komponenten kommer att infogas i ASPX-sidan när sidan sparas ned i filsystemet. Om en och samma komponent infogas flera gånger en och samma ASPX-sida, finns det möjlighet att bygga komponenterna på så sätt att programkoden antingen infogas flera gånger i ASPX-sidan, eller endast en gång.

Att skriva programkod för en AS-komponent påminner mycket om att skriva programkod i HTML-läget i Webbitorn. Det går således att skapa komponenter som inte ens innehåller serverkod utan istället innehåller HTML eller JavaScriptkod. Den kod som skrivs in i AS-komponenten kommer att infogas på det ställe i ASPX-sidan där komponenten infogas. Den programkod som skrivs kan använda alla möjligheter i ASP.NET och Content Studio API. Det är naturligtvis mer vanligt med komponenter innehållande C# eller VB.NET-kod jämfört med statiska HTML/XHTML-komponenter.

Exempel 1 VB.NET / C#
Nu är klockan <%Response.Write(DateTime.Now.ToString())%>
Exempel 2: Html
Detta är en komponent som endast infogar HTML...
Inställningar för AS-komponenten
Inställning Beskrivning
Namn Anger namnet på komponenten. Namn bör inte bytas på en komponent som redan används. Namnet används som identifierare av komponenten. Om namnet byts så måste komponenten infogas om på de sidor där den används.
Beskrivning Beskrivning av komponenten. Visas i det automatgenerrerade gränssnittet.
Version Möjlighet att ange en version av komponenten.
Innehållstyp Anger vilken typ av html-containerelement som komponenten genererar. Om komponenten genererar t.ex en tabell eller en div så ska innehållstyp vara block. Om komponenten genererar t.ex en input eller en span så ska innehållstypen vara inline. Vet man inte vad komponenten kommer att generera så kan man ange unknown.
Serverspråk Anger vilka serverspråk som komponenten stödjer. Separeras med stuprörs-tecknet |.
Denna komponent är xhtml-kompatibel Anger om innehållet i komponenten genererar xhtml-kompatibel kod.

Parametrar

AS-komponenter kan konfigureras via ett automatgenererat användargränssnitt. Gränssnittet genereras utifrån de parametrar som utvecklaren försett komponenten med. Gränssnittet kan innehålla textrutor, kryssrutor, alternativknappar m.m. Det är upp till utvecklaren att avgöra vilka parametrar som är önskvärda, och om dessa skall ha förvalda värden. När en parameter definieras av utvecklaren anges ett namn och en datatyp. Namnet på parametern kan användas som inparametrar till programkoden, och datatypen anger hur användargränssnittet för parameteren skall se ut.

I programkoden kan man enkelt referera till de parametrar som definierats för AS-komponenten. Detta kan ske med drag-och-släpp från parameterlistan till programkoden. Syntaxen för parametrarna är <@parameternamn>. När Content Studio skriver ned innehållet i AS-komponenten till sidan där komponenten infogats, kommer Content Studio att ersätta alla <@parameternamn> med värdet de givits i användargränssnittet. På detta sätt kan alltså användarna av komponenten konfigurera programkoden/komponenten.

Exempel 1 (HTML)

 Värdet på din parameter med namn MinParameter är <@MinParameter>

Exempel 2 (C#)

    <%
    string param1="<@param1>";
    Response.Write(param1);
    %>

För parametrar som skapas finns ett flertal parametrar. Vilka parametrarna är beror på vilken datatyp som väljs:

Namn Beskrivning
Datatyp Datatyp
Name Namn på parametern. Detta namn används i programkoden. Kan endast innehåll A-Z 0-9 samt underscore ("_")
Friendly name Namn som visas i gränssnittet
Start value Startvärde för parametern alternativt de element som ska ingå i en dropdownlista.
Description Beskrivning av parametern. För datatypen Header används description som värde för den text som skall skrivas ut.
Size Max antal tecken
HTML encode Värdet som anges för parametern kommer att HTML-encodas innan det infogas i programkoden.
VB String Värdet som anges för parametern kommer att escapas innan det infogas i programkoden. Beroende på programspråk (C# eller VB.NET) kommer strängens värde att förändras. Exempelvis kommer radbrytningar att ersättas med VbNewLine i VB.NET, och \n i C#.
Java String Värdet som anges för parametern kommer att escapas i enighet med Javascript innan det infogas i programkoden.
Separator Infogar en HR-avskiljare efter parametern
HTML Description Den text som skrivs i Descriptionfältet kommer normalt att HTML-encodas innan den infogas. Genom att välja HTML Description kommer istället innehållet att infogas direkt. Detta är användbart när det är önskvärd med HTML-formatterade beskrivningar.
URL Används för Custom datatype och anger URL till sidan med den egna datatypen. För mer info om Custom datatypes, se nedan.
Group name Används för datatyper som går att gruppera, exempelvis Option button.

Man kan inte i efterhand byta namn på en parameter eller en komponent. Sker detta kommer inkompatiblitet uppstå på de sidor där komponenten redan har infogats.

Källkoden för samtliga AS-komponenter som ingår i Content Studio, finns tillgänglig i Content Studio SDK.

Lagring i HTML/XHTML

Content Studio lagrar alla referenser och inställningar till infogade AS-komponenter i form av XML-island ("ö") i HTML/XHTML-koden. Denna "ö" innehåller namnet på komponenten, parametrar och värden på parametrar. Det finns möjlighet i Webbitorn att dölja dessa XML-öar vilket kan göra det enklare att överblicka HTML/XHTML-koden.

XML-ö:n kommer att ersättas av programkoden i AS-komponenten (och parametervärden) när dokumentet godkännes och sparas ned i filsystemet.

Exempel på XML-ö som renderas av komponenten ShowDate:

Xml
<cs:activescript contenteditable="false" cstype="script">
<XML><CSROOT xmlns:cdt="http://www.teknikhuset.se/CS/datatypes">
	<CSSCRIPT name="Show date" description="Writes the current date into the document. There is a number of different swedish standard formats available and an additional possibility to specify a custom format." version="1.0" xhtmlsafe="1" content="inline" serverlanguage="c#|vb" id="1">
		<PARAMETERS>
			<PARAMETER cdt:type="header" name="Predefined" value="" description="Predefined date formats" cdt:size="" friendlyname=""/>
			<PARAMETER cdt:size="Grupp1" cdt:type="csoption" name="DateFormat1" description="" value="true" friendlyname="yyyy-MM-dd (2001-03-01)"/>
			<PARAMETER cdt:size="Grupp1" cdt:type="csoption" name="DateFormat2" description="" value="false" friendlyname="yyyy-MM-dd HH:mm (2001-03-01 12:31)"/>
			<PARAMETER cdt:size="Grupp1" cdt:type="csoption" name="DateFormat3" description="" value="false" friendlyname="d MMMM yyyy (1 mars 2001)"/>
			<PARAMETER cdt:size="Grupp1" cdt:type="csoption" name="DateFormat4" description="" value="false" friendlyname="Day den d MMMM yyyy (Måndagen den 1 mars 2001)" separator="1"/>
			<PARAMETER cdt:type="header" name="customFormatHeading" value="" description="Create a custom date format" cdt:size="" friendlyname=""/>
			<PARAMETER cdt:type="csoption" name="DateFormat5" value="false" description="" cdt:size="Grupp1" friendlyname="Custom format"/>
			<PARAMETER cdt:type="" 
			 	  name="CustomFormat" 
			           value="yyyy-MM-dd HH:mm:ss" 
				  description="A custom date/time format to use. This format should comply with the .NET 
                      DateTimeFormatInfo class specification. Ex. system aware formats like  "D" (long date) "d" (short date) "G" (General long date/time) "g" (general short date/time) and exact formats like  "yyyy-MM-dd HH:mm:ss" which is the standard swedish date/time format." 
				  cdt:size="" friendlyname="Date format string"/>
		</PARAMETERS>
	</CSSCRIPT>
</CSROOT>
</XML> Show date Predefined= 
</cs:activescript> 

Scriptblock - run-at-server

Metoder och klassdefinitioner kan endast definieras i scriptblock i ASP.NET. Detta betyder att AS-komponenter som byggs upp av metoder eller klassdefinitioner måste omges av ett scritblock: <script runat="server"></script>. Exempel:

<script runat="server" id="myuniqueid">
    void printTheParameter(string param1)
    {
      Response.Write(param1);
    }
</script>
<%
  //Here is the call to our method
  printTheParameter("<@param1>");
%>
 

Notera att attributet ID måste anges om scriptblocket inte skall infogas fler än en gång i de fall en utvecklare infogar komponenten flera gånger på en och samma ASPX-sida. Programkoden utanför scriptblocken kommer dock alltid att infogas på det ställe på ASPX-sidan där komponenten infogas. Att använda scriptblock i AS-komponenter är att rekommendera eftersom metoderna kan återanvändas.

Datatypes

Det finns flera olika datatyper för de parametrar som kan användas i AS-komponenter. Dessa är:

Grupp Namn Beskrivning
Default Option button Infogar en optionbutton. Värdet på parametern kan endast vara true eller false.
Möjlighet finns att ange ett gruppnamn som kommer att gruppera samman alla parametrar av samma datatyp.
Integer Infogar ett inputfält som endast tar emot heltalsvärden.
Checkbox Infogar en kryssruta. Värdet på parametern kan endast vara true eller false.
Drop-down box Infogar en rullningsbar lista. Datatypen är utgången och ersätts av Drop-down box v.2.
Drop-down box v.2 Infogar en rullningsbar lista med möjlighet att ange ett eller flera alternativ och värden.
Text area Infogar en flerradig textruta.
Expandable text area Infogar en flerradig textruta som expanderas när textrutan får fokus.
String Infogar en enradig textruta.
Password Infogar ett textfält som döljer de tecken som skrivs int.
Custom datatype Genom att ange ett dokument i Content Studio (http-adressen till dokumentet) kommer resultatet av anropet till sidan att infogas i en I-Frame. Detta gör det möjligt att exempelvis skapa parametrar som genererar dropdownlistor innehållande information från externa databaser eller system. För mer information, läs mer om Custom Datatypes.
Separator Infogar en avskiljare (HR). Parametern kan ej användas i programkoden och gränssnittet visar ingen kontroll för att ange värde.
Header Infogar en rubrik vilket är användbart vid exempelvis gruppering av parametrar. Det finns möjlighet att använda HTML (encodad) för att formattera texten. Den text som skall visas skrivs in i descriptionfältet för parametern.
CS specific Image ID Infogar en bläddringsdialog som endast tar emot bilder. Returnerar ID:t för vald bild
Image URL Infogar en bläddringsdialog som endast tar emot bilder. Returnerar en relativ sökväg till det valda dokumentet.
Document ID Infogar en bläddringsdialog. Returnerar ID:t för det valda dokumentet.
URL Infogar en bläddringsdialog. Returnerar en relativ sökväg till det valda dokumentet.
Contents of document Infogar källkoden från bläddringsdialogen valt dokument.
Units Infogar en lista med checkboxar för de enheter som finns i systemet. Returnerar en kommaseparerad sträng med ID:n.
Colour Visar en färgväljare. Returnerar färg i klassisk hexadecimal form, exempelvis #EFEFEF.
Category v.1 Visar en kategoriväljare. Returnerar UnitID, CategoriID
Category v.2 Visar en kategoriväljare. Returnerar ett CategoriID
Category list Visar en kategoriväljare. Returnerar XML i formatet:
<categories>
   <category name="Sve/Nyheter">294</category>
   <category name="Sve/Artiklar">433</category>
</categories>
Class Visar en dropdownlista med tillgänglig klassnamn tillgängliga från stylesheetet(n).
MLC Language Visar en dropdownlista med tillgängliga språk.
EPT EPT field Väljer en EPT-kategori och visar de fält som finns tillgängliga. Returerar valt fält i formatet UnitID, CategoryID, EditTemplateID, FieldName.
EPT field for presentation templates Om komponenten infogas i en presentationsmall kommer denna datatyp automatiskt att fyllas med de fält som finns tillgängliga i redigeringsformuläret. Returnar fältnamn.
Event Visar alla tillgängliga events för EPT.
Indexed EPT fields Väljer en EPT-kategori och visar de fält som indexerats upp av Content Studio XML-index. Returerar valt fält i formatet UnitID, CategoryID, TagID, FieldName.
Presentation template Visar en bläddrardialog som endast tar emot presentationsmallar. Returnerar ID på presentationsmallen.

Exempelkod som genereras

När en ny AS-komponent skapas infogar Content Studio automatiskt en stardardkod. Koden innehåller programmeringsexempel med kommentarer:
HTML:

<!--@@ServerLanguage="C#"@@
<script runat="server" id="MyASComponent">
//Welcome to Content Studio .NET and the Active Scripting framework. This template code is automatically 
//inserted for you and the purpose is to help you getting started with buildning your new component. 
//The template covers both C# and VB.NET and contains a simple component that renders the output of the parameter 
//Stringvalue.
// For more information, please visit http://www.teknikhuset.se or read the CS .NET API documentation.
//----------------------------------------------------------------------------------------------------------------
//C#:
//This is a template server script block for pages written in C#. This code will be placed in the code-behind file
//built by Content Studio.
//This type of server script block can only contain declarations.
//If the script block contains an ID the script block (ie the actual code) will only be inserted once per page 
//even if the same
//component is inserted more than once within the same page.
public void MyASComponent(string StringValue)
{
	Response.Write("<b>The value of the parameter StringValue is:</b>" + StringValue);
}
</script>
<%
//This is an example of an inline script block for pages written in C#.
//This script block can contain inline code.
//This scriptblock will be iserted at the same place as the component is inserted.
//This is the method call for MyASComponent:
MyASComponent("<@StringValue>");
%>
//----------------------------------------------------------------------------------------------------------------
//VB.NET:
//@@ServerLanguage@@--><!--@@ServerLanguage="VB"@@
<script runat="server" id="MyASComponent">
'This is a template server script block for pages written in VB.NET. This code will be placed in the code-behind file
'built by Content Studio.
'This type of server script blocks can only contain declarations.
'If the script block contains an id the script block will only be inserted once per page even if the same
'component is inserted twice or more.
Sub MyASComponent(StringValue As String)
	Response.Write("<b>The value of the parameter StringValue is:</b>" & StringValue)
End Sub
</script>
<%
'This is a inline script block for pages written in VB.NET.
'This script block can contain inline code.
'This scriptblock will be iserted at the same place as the component is inserted.
'This is the method call for MyASComponent:
MyASComponent("<@StringValue>")
%>
//@@ServerLanguage@@-->
<!-- The code below contains comments and is avaliable for both C# and VB.NET. 
It uses a constant (/*@@SemiColon@@*/) for inserting semicolon that is used in C#. If the page is written in C# 
this constant will be replace with ;. Otherwise nothing.It also uses a constant named (/*@@ComponentCount@@*/) 
that will be replaced with 1 for the first AS component on the page and 2 for the second and so on. 
This is very usefull if there is a need for aunique id in the component. 

Example: -->
<%Response.Write(CS_XHTML_TRAIL)/*@@SemiColon@@*/%>><asp:label runat="server" id="lblMyLabel/*@@ComponentCount@@*/">
</asp:label><%	 Response.Write("This is the page title:" + Page.Title)/*@@SemiColon@@*/%>

Constructor code:

<!--@@ServerLanguage="C#"@@//This code block will be placed in in the constructor for the page.//This is the C# part.//@@ServerLanguage@@-->
<!--@@ServerLanguage="VB"@@'This code block will be placed in in the constructor for the page.'This is the VB.Net part.//@@ServerLanguage@@-->

On Load Code:

<!--@@ServerLanguage="C#"@@//This code block will be placed in the Page_Load method for the page.
        //This is the C# part.lblMyLabel/*@@ComponentCount@@*/.Text = "Text of lblMyLabel/*@@ComponentCount@@*/<br" + CS_XHTML_TRAIL + ">";
        //@@ServerLanguage@@-->
<!--@@ServerLanguage="VB"@@'This code block will be placed in the Page_Load method for the page. 'This is the VB.Net part.lblMyLabel/*@@ComponentCount@@*/.Text = "Text of lblMyLabel/*@@ComponentCount@@*/<br" & CS_XHTML_TRAIL & ">"//@@ServerLanguage@@-->

Custom Datatypes

Det finns möjlighet att skapa egna datatyper som kan användas vid definition av parametrar för AS-komponenter. En Custom Datatype kan exekvera godtycklig kod, exempelvis fylla en dropdown genom ett urval från en extern databas. Det som är viktigt är att sidan måste hantera värdet som finns i parametern; dels initialt avläsa det tidigare satta värdet, samt skriva tillbaka det värde som väljs i parametern. Detta sker med Javascript:

För att läsa värdet i parametern och använda detta i Custom Datatype:

JavaScript
var MyParamValue=parent.document.getElementById("MyParameter").value;

För att skriva tillbaka värdet från Custom Datatype till parametern:

JavaScript
parent.document.getElementById("MyParameter").value = MyParamValue;

Performance and cache

För att optimera prestandan på AS-komponenter som utvecklas bör alltid prestanda och cachemöjligheter vägas in. Det är rekommenderat att i programkoden utnyttja .NET Cacheobjekt när det är lämpligt. Om cache kan aktiveras i komponenten bör användargränssnittet förses med inställningsmöjligheter som avaktiverar eller konfigurerar cachetiden.